<template>
  <view class="container">
    <view class="empty-content" v-show="userInfo.addressList.length === 0">
      <u-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </view>
    
    <view class="content" v-show="userInfo.addressList.length !== 0">
      <view class="item" v-for="(item, index) in userInfo.addressList">
        <view class="title">{{item.addrUser}}, {{item.phone}}</view>
        <view class="detail">{{item.region}} {{item.fullAddr}}</view>
      </view>
    </view>
    
    <view class="bottom-btn">
      <view class="add-manually">
        <u-button type="success" text="手动添加地址" shape="circle" @click="goToFullAddrPage"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      goToFullAddrPage() {
        uni.navigateTo({
          url: '/components/selectAddr/selectAddr'
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 50rpx;
    
    .content {
      width: 90%;
      margin: 0 auto;
      
      .item {
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #ccc;
      }
    }
    
    // 底部按钮样式
    .bottom-btn {
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 50rpx;
      width: 100%;
      
      .add-manually {
        width: 500rpx;
        margin: 0 auto;
      }
    }
  }
</style>
